<template>
  <div class="user-header">
    <div class="user-header-content">
      <div class="user-avatar">
        <a-avatar :size="80">
          <img :src="userInfo.avatar || '/default-avatar.png'" alt="用户头像" />
        </a-avatar>
      </div>
      <div class="user-info">
        <div class="user-name">
          <a-typography-title :heading="4" style="margin: 0">
            {{ userInfo.realName || '用户名' }}
          </a-typography-title>
        </div>
        <div class="user-details">
          <div class="detail-item">
            <icon-email style="color: #ffffff; margin-right: 8px; font-size: 16px;" />
            <a-typography-text>{{ userInfo.email || '未设置邮箱' }}</a-typography-text>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { SysUserService, SysUserSimpleResponse } from '@/api/gen-api';
import { useRoute } from 'vue-router';

// 扩展用户信息类型以包含我们需要的字段
interface ExtendedUserInfo extends SysUserSimpleResponse {
  jobName?: string;
  organizationName?: string; 
  locationName?: string;
  email?: string;
}

const userInfo = ref<ExtendedUserInfo>({
  avatar: '',
  realName: ''
});
const userId = useRoute().query.id as string;

onMounted(() => {
  SysUserService.getInfoById(userId).then(res => {
    if (res.result) {
      userInfo.value = res.result as ExtendedUserInfo;
    }
  });
});
</script>

<style scoped lang="less">
.user-header {
  height: 220px;
  width: 100%;
  background: linear-gradient(135deg, #2759CD 0%, #3c7be3 100%);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(39, 89, 205, 0.2);
  
  // 添加装饰性图案
  &::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: url('');
    background-size: cover;
    opacity: 0.2;
  }
  
  &-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 40px;
  }
}

.user-avatar {
  margin-right: 24px;
  
  :deep(.arco-avatar) {
    border: 4px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

.user-info {
  color: #fff;
  
  .user-name {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    
    :deep(.arco-typography) {
      color: #fff;
      margin-right: 12px;
    }
  }
  
  .user-details {
    .detail-item {
      display: flex;
      align-items: center;
      
      .arco-icon {
        margin-right: 8px;
        font-size: 16px;
        color: rgba(255, 255, 255, 0.8);
      }
      
      :deep(.arco-typography) {
        color: rgba(255, 255, 255, 0.9);
      }
    }
  }
}

// 响应式调整
@media (max-width: 768px) {
  .user-header {
    height: auto;
    padding: 30px 0;
    
    &-content {
      flex-direction: column;
      text-align: center;
      padding: 0 20px;
    }
  }
  
  .user-avatar {
    margin-right: 0;
    margin-bottom: 16px;
  }
  
  .user-info {
    .user-name {
      flex-direction: column;
      
      :deep(.arco-typography) {
        margin-right: 0;
        margin-bottom: 8px;
      }
    }
    
    .user-details {
      :deep(.arco-space) {
        flex-direction: column;
        gap: 12px !important;
      }
    }
  }
}
</style>
